<html>
<head>
<head>
<title>
Beatuty Show
</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
index=1;
$.get("getImageCount.php",function(data,status){
imgcount=data;
});
$("#showimg").click(function(){
$("#show").attr("src",$("#imgid").val()+".jpg")
});
$("#prebutton").click(function(){
$("#show").attr("src",index+".jpg")
if(index==1)
alert("No picture")
else
index--;
});
$("#nextbutton").click(function(){
$("#show").attr("src",index+".jpg")
if(index==imgcount)
alert("No picture")
else
index++
});
});
</script>
<style>
.pic{
position:relative;
}
#show{
width:75%;
height:auto;
padding:5px 5px 5px 5px;
border-radius:25px;
border:1px solid #ccc
box-shadow: 0 0 5px #ccc;
}
</style>
</head>

<body>
<div class='pic'>
<input type="text" id='imgid'/>
<input type="button" id="showimg" value="show picture"/>
<input type="button" id="prebutton" value="previous picture"/>
<input type="button" id="nextbutton" value="next button"/>
<div id='imgbox'/>
<img id='show'/>
</div>
</div>
</body>
</html>
